// 商品列表模板
import draggable from 'vuedraggable'
import { saveMicroPage,viewPageByCategory } from '@/api/shoppingMall/feature'

export default {
  name: 'GoodsTabs',
  components: {
    draggable,
    iconFont:()=>import('@/components/icon-font'),
    chooseFeature: () => import('@/components/choose-feature/index.vue')
  },
  data() {
    return {
      dialogChoosePages: false, // 微页面弹窗
      isGetChooseFeature: false,// 是否可以返回微页面
      isICon: true,
      isDialogIcon: false,
      dialogVisible: false,
      currentChooseModel: 1,
      itemTmp: {
        title: '菜单',
        link: '',
        type:'',
        id:'',
        visible: true,
        icon: '',
        iconA:''
      },
      maxTabNum: 5,// 最多一级导航数量
      maxChildTabNum: 4,// 最多二级导航数量
      iconHref:'',
      inconIndex:null,
      isBool:null,
      inconChildI:'',
      id:'',
      tabConfig: {
        category:80,
        title: '底部导航页',
        type: 2, //1、微信公众号 2、APP导航模板 3、带购物车导航模板 4、Path展开形式导航 5、两侧展开形式导航
        // 主导航
        main: true,
        // 背景颜色
        backgroundColor: '#ffffff',
        defaultColor: '#b2b1af',
        activeColor: '#e64b3b',
        list: [
          {
            title: '首页',
            link: '/pages/main/index/index',
            type:'',
            id:'',
            visible: true,
            icon: '#icon-shouye1',
            iconA:'#icon-shouye-xuanzhong'
          },
          {
            title: '活动',
            link: '/pages/main/activityList/activityList',
            type:'',
            id:'',
            visible: true,
            icon: '#icon-huodong1',
            iconA:'#icon-huodong-xuanzhong'
          },
          {
            title: '线上商城',
            link: 'pages/main/functionPage/functionPage',
            type:'',
            id:'6871308411796721551',
            visible: true,
            icon: '#icon-choujiang1',
            iconA:'#icon-choujiang-xuanzhong'
          },
          {
            title: '客服',
            link: '',
            type:'',
            id:'',
            visible: true,
            icon: '#icon-kefu1',
            iconA:'#icon-kefu-xuanzhong'
          },
          {
            title: '我的',
            link: '/pages/main/user/user',
            type:'',
            id:'',
            visible: true,
            icon: '#icon-wode',
            iconA:'#icon-wode-xuanzhong'
          }
        ],
      }
    }
  },
  mounted () {
    this.getInfo()
  },
  methods: {
    getInfo(){
      viewPageByCategory({ id: 80 }).then(res => {
        if(res !== null){
          this.id = res.id
          this.tabConfig = res.moduleList[0].dataField
        }       
      })
    },
    // 保存
    save(){
      this.isSaving = true
      const moduleList = {
        id: this.id,
        operType: 2,
        moduleList: [{
            type: "config",
            dataField: this.tabConfig
        }]
      }
      saveMicroPage(moduleList).then(res => {
        this.isSaving = false
        this.$message.success('发布成功')
        this.getInfo()
      })
    },
    // 链接
    linkClick(i){
      this.inconIndex = i
      this.dialogChoosePages = true
    },
    chooseChooseFeaturesFun($event) {
      switch($event.data.type){
        case 0:
          if(this.inconChildI === ''|| this.inconChildI === undefined){
            this.tabConfig.list[this.inconIndex].link = $event.data.path
            this.tabConfig.list[this.inconIndex].type = $event.data.type
          }else{
            this.tabConfig.list[this.inconIndex].child[this.inconChildI].link = $event.data.path
            this.tabConfig.list[this.inconIndex].child[this.inconChildI].type = $event.data.path
          }
          break;
        case 1:
          if(this.inconChildI === ''|| this.inconChildI === undefined){
            this.tabConfig.list[this.inconIndex].link = '/pages/main/functionPage/functionPage'
            this.tabConfig.list[this.inconIndex].type = $event.data.type
            this.tabConfig.list[this.inconIndex].id = $event.data.id
          }else{
            this.tabConfig.list[this.inconIndex].child[this.inconChildI].link = '/pages/main/functionPage/functionPage'
            this.tabConfig.list[this.inconIndex].child[this.inconChildI].type = $event.data.type
            this.tabConfig.list[this.inconIndex].child[this.inconChildI].id = $event.data.id
          }
          break;
        case 2:
          if(this.inconChildI === ''|| this.inconChildI === undefined){
            this.tabConfig.list[this.inconIndex].link = '/pages/main/goods/goodsDetails/goodsDetails'
            this.tabConfig.list[this.inconIndex].type = $event.data.type
            this.tabConfig.list[this.inconIndex].id = $event.data.id
          }else{
            this.tabConfig.list[this.inconIndex].child[this.inconChildI].link = '/pages/main/goods/goodsDetails/goodsDetails'
            this.tabConfig.list[this.inconIndex].child[this.inconChildI].type = $event.data.type
            this.tabConfig.list[this.inconIndex].child[this.inconChildI].id = $event.data.id
          }
          break;
        case 3:
          break;
      }
      this.dialogChoosePages = false
    },
    // 确定 图标
    iconChooseModel(){
      if(this.isBool){
        if(this.inconChildI === ''|| this.inconChildI === undefined){
          this.tabConfig.list[this.inconIndex].icon= this.iconHref
        }else{
          this.tabConfig.list[this.inconIndex].child[this.inconChildI].icon= this.iconHref
        }
      }else{
        if(this.inconChildI === ''|| this.inconChildI === undefined){
          this.tabConfig.list[this.inconIndex].iconA= this.iconHref
        }else{
          this.tabConfig.list[this.inconIndex].child[this.inconChildI].iconA= this.iconHref
        }
      }
      this.isDialogIcon = false
    },
    iconBox(val){
      this.iconHref = val
    },
    selectedClick(i,bool,childI){
      this.inconChildI = undefined?'':childI
      this.isDialogIcon = true
      this.inconIndex = i
      this.isBool = bool
      this.isShow()
    },
    unselectedClick(i,bool,childI){
      this.inconChildI = undefined?'':childI
      this.isDialogIcon = true
      this.inconIndex = i
      this.isBool = bool
      this.isShow()
    },
    isShow(){
      this.isICon = false
      this.$nextTick(()=>{
        this.isICon = true
      })
    },
    dragOnMove($data) {
      let { index } = $data.relatedContext
      let is = true
      if (index === 0 || (index !== 0 && $data.draggedContext.index === 0)) {
        is = false
      }
      return is
    },
    // 点击添加tab
    handleAddTab() {
      if (this.tabConfig.list.length >= this.maxTabNum) return
      this.tabConfig.list.push(JSON.parse(JSON.stringify(this.itemTmp)))
    },
    // 添加二级tab
    handleAddChildTab(item) {
      if (!item.hasOwnProperty('child')) {
        this.$set(item, 'child', [])
      }
      if (item.child.length >= this.maxChildTabNum) return
      item.child.push(JSON.parse(JSON.stringify(this.itemTmp)))
    },
    handlerChooseActiveColor(type, item) {
      this.tabConfig[type] = item
      let pop = this.$refs.popHead
      if (pop && pop.length) {
        pop[0].doClose()
      }
    },
    // 选择类型
    handleChangeModel() {
      this.currentChooseModel = JSON.parse(JSON.stringify(this.tabConfig.type))
      this.dialogVisible = true
    },
    handleChooseModel() {
      this.tabConfig.type = JSON.parse(JSON.stringify(this.currentChooseModel))
      this.dialogVisible = false
    }
  }
}
